import React, {useEffect, useState} from "react";
import {
    Button,
    Checkbox,
    Col,
    Form,
    Input,
    InputNumber,
    message,
    Modal,
    Radio,
    Row,
    Tooltip, Tree, TreeSelect,
} from 'antd';
import {handleTree, setTreeSelect} from "@/utils/Z.ts";

import styles from "./index.module.css";
import {QuestionCircleOutlined} from "@ant-design/icons";
import {addRole, getRole, updateRole} from "@/api/system/role.ts";
import {
    addMenu,
    listMenu,
    roleMenuTreeSelect,
    treeselect as menuTreeSelect, updateMenu
} from "@/api/system/menu.js";
import {addDept, listDept, updateDept} from "@/api/system/dept.ts";
import { globalMessage } from "@/utils/message";

// 定义组件的 props 类型
interface MyComponentProps {
    open: boolean;
    title?: string;
    OnCanCle: () => void;
    record:any;

}

const EditorDeptView: React.FC<MyComponentProps> = (props) => {
    const [form] = Form.useForm();
    // 表单的值
    const [formData, setFormData] = useState(props.record)
    const [menuOptions, setMenuOptions] = useState([]);


    function handleCancel() {
        props.OnCanCle()
    }

    useEffect(() => {
        getTreeSelect()
        form.setFieldsValue({
            parentId: props.record?.parentId ||'',
            deptName: props.record?.deptName || undefined,
            orderNum: props.record?.orderNum || 0,
            leader: props.record?.leader || '',
            phone: props.record?.phone || undefined,
            email: props.record?.email || undefined,
            status: props.record?.status || "0"
        });
    }, [props.record]);
    const getTreeSelect = () => {
        listDept().then((res:any) => {
            if (res?.code === 200) {
                const obj = {
                    key: "deptId",
                    value: "deptId",
                    title: "deptName",
                };
                setMenuOptions([...handleTree(setTreeSelect(res.data, obj), "deptId")]);
            }
        });
    };

    const onValuesChange = (changedValues:any, allValues:any):void => {
        if (props.record.deptId !== undefined) {

            setFormData(prevState => ({
                ...prevState,
                ...changedValues
            }));
        } else {
            setFormData(prevState => ({
                ...allValues
            }));
        }


    };
    const handleSubmit = () => {
        // 在提交前先进行表单验证
        form.validateFields().then(values => {
            if (props.record.deptId !== undefined) {
                updateDept(formData).then((res:any) => {
                     globalMessage().warning(res.msg).then(r => {})
                    props.OnCanCle()
                });
            } else {
                addDept(formData).then((res:any) => {
                     globalMessage().warning(res.msg).then(r => {})
                    props.OnCanCle()
                });
            }
        }).catch(errorInfo => {

            // 如果验证失败，则不执行提交操作
        });
    }




    return (
        <>
            <Modal
                forceRender
                open={props.open}
                title={props.title}
                footer={null}
                onCancel={() => {
                    props.OnCanCle()
                }}
            >
                <Form
                    form={form}
                    name="editorDept_form"
                    style={{maxWidth: 600}}
                    onValuesChange={onValuesChange}>
                    <Row gutter={10}>
                        {props.record.parentId !== 0 && (
                            <Col span={24}>
                                <Form.Item label="上级部门" name="parentId" labelCol={{span: 4}}>
                                    <TreeSelect
                                        defaultValue={formData.parentId}
                                        showSearch
                                        style={{width: '100%'}}
                                        dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
                                        placeholder="请选择"
                                        treeDefaultExpandAll
                                        treeData={menuOptions}
                                    />
                                </Form.Item>
                            </Col>
                        )}



                        <Col span={12}>
                            <Form.Item
                                label="部门名称:"
                                name="deptName"
                                labelCol={{span: 8,}}
                                rules={[
                                    {required: true, message: '请输入部门名称!'},
                                ]}
                            >
                                <Input value={formData.deptName}/>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="显示排序"
                                name="orderNum"
                                labelCol={{span: 9,}}
                                rules={[
                                    {required: true, message: '请输入排序!'},
                                ]}
                            >
                                <InputNumber min={0} value={formData.orderNum}/>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="负责人"
                                name="leader"
                                labelCol={{span: 8,}}
                            >
                                <Input value={formData?.leader}/>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="联系电话"
                                name="phone"
                                labelCol={{span: 8,}}
                            >
                                <Input value={formData?.phone}/>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="邮箱"
                                name="email"
                                labelCol={{span: 8,}}
                            >
                                <Input value={formData?.email}/>
                            </Form.Item>
                        </Col>


                        <Col span={12}>
                            <Form.Item
                                labelCol={{span: 9,}}
                                label={"部门状态"}
                                name="status"
                            >
                                <Radio.Group value={formData.status} defaultValue={"0"}>
                                    <Radio value={"0"}>正常</Radio>
                                    <Radio value={"1"}>停用</Radio>
                                </Radio.Group>
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item
                                wrapperCol={{offset: 16, span: 8}}
                            >
                                <div className={styles.buttonClass}>
                                    <Button type="primary" htmlType="submit" onClick={handleSubmit}>确认</Button>
                                    <Button type="primary" onClick={handleCancel}>取消</Button>
                                </div>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Modal>

        </>
    )
};
export default EditorDeptView;
